<template>
  <div class="PostDetails">
    <!-- 顶部标题 -->
    <top-title-bar>
      <template #left>
        <div class="left" @click="$router.go(-1)">
          <span class="iconfont icon-xiangzuo1"></span>
          <span class="title" v-show="from">{{ from }}</span>
        </div>
      </template>
      <template #right>
        <div class="right" @click="$router.push('/MsgView')">
          <span class="iconfont icon-xiaoxi"></span>
        </div>
      </template>
    </top-title-bar>

    <div class="wrap" v-if="postData">
      <div class="title">
        <h4>{{ postData.post.title }}</h4>

        <!-- !!!!!!!!!!!!!!!!!!!!!!!! -->
        <!-- !!!!!!!!!!!!!!!!!!!!!!!! -->
        <!-- !!!!!!!!!!!!!!!!!!!!!!!! -->
        <!-- !!!!!!!!!!!!!!!!!!!!!!!! -->
        <!-- !!!!!!!!!!!!!!!!!!!!!!!! -->
        <!-- 标签 -->
        <i class="iconfont icon-tupian"></i>
      </div>

      <div class="date">{{ postData.post.createTime | numToYMD }}</div>

      <div class="details">
        <!-- - 左边 -->
        <div class="left">
          <div class="seek">
            <span class="iconfont icon-kanguo_S"></span> {{ postData.post.hit }}
          </div>
          <div class="msg">
            <span class="iconfont icon-xiaoxi1"></span>
            {{ postData.post.commentCount }}
          </div>
          <div class="praise">
            <span class="iconfont icon-dianzan"></span>
            {{ postData.post.praise }}
          </div>
        </div>

        <!-- - 右边 -->
        <div class="right">
          <router-link
            tag="a"
            :to="'/PostView?cat_id=' + postData.post.category.categoryID"
            >{{ postData.post.category.title }}
            <i class="iconfont icon-xiangyou1"></i
          ></router-link>
        </div>
      </div>

      <div v-if="currPageNo == 1">
        <div class="poster">
          <div
            class="box"
            @click="
              $router.push('/UserInfos?user_id=' + postData.post.user.userID)
            "
          >
            <!-- - 左边 -->
            <div class="left">
              <!-- - 图片 -->
              <div
                class="icon"
                @click="ImagePreviewFun([postData.post.user.avatar], 0)"
              >
                <img :src="postData.post.user.avatar" alt="" />
              </div>

              <div class="name-sex">
                <p class="name">{{ postData.post.user.nick }}</p>
                <p :class="['sex', { woman: postData.post.user.gender == 1 }]">
                  <span
                    ><em
                      :class="[
                        'iconfont',
                        postData.post.user.gender == 2 ? 'icon-nan' : 'icon-nv',
                      ]"
                    ></em>
                    {{ postData.post.user.age }}</span
                  >
                </p>
              </div>
            </div>

            <!-- - 右边 -->
            <div class="right"><span>楼主</span></div>
          </div>
        </div>

        <div class="post-content">
          <div class="text-img" @click="showBottomPopup(true, -1)">
            <div
              class="text"
              v-html="TextToHtml(HtmlToText(postData.post.detail))"
            >
              <!-- <p></p> -->
            </div>

            <div class="imgs">
              <div
                class="img"
                v-for="(img, i) in postData.post.images"
                :key="img"
                @click.stop="ImagePreviewFun(postData.post.images, i)"
              >
                <img :src="img" alt="" />
              </div>
            </div>
          </div>

          <div class="exceptional">
            <!-- - 左边 -->
            <div class="left">
              <div class="sum">
                <!-- - 图片 -->
                <div class="icon">
                  <img
                    src="../assets/img/PostDetails/exceptional-icon.png"
                    alt=""
                  /><span>+{{ postData.post.scorecount }}</span>
                </div>
              </div>

              <div class="users">
                <!-- - 图片 -->
                <div
                  class="icon"
                  v-for="(score, i) in postData.post.scorelist"
                  :key="i"
                >
                  <img
                    :src="score.avatar"
                    alt=""
                    @click="
                      ImagePreviewFun(
                        postData.post.scorelist.map((o) => o.avatar),
                        i
                      )
                    "
                  /><span>{{ score.score }}</span>
                </div>
              </div>
            </div>

            <!-- - 右边 -->
            <div class="right"><i class="iconfont icon-gengduo"></i></div>
          </div>
        </div>
      </div>

      <div class="comments">
        <div class="head">
          <h4>评论 {{ postData.post.commentCount }}</h4>
        </div>

        <div class="body">
          <div
            :class="['msg-publish', { 'msg-reply': item.refComment }]"
            @click="showBottomPopup(false, item.seq)"
            v-for="item in postComments"
            :key="item.seq"
          >
            <!-- - 图片 -->
            <div class="icon">
              <img
                :src="item.user.avatar"
                alt=""
                @click.stop="ImagePreviewFun([item.user.avatar], 0)"
              /><span v-if="item.user.userID == postData.post.user.userID"
                >楼主</span
              >
            </div>

            <div class="text">
              <div class="msg-title">
                <span>{{ item.user.nick }}</span
                ><small>{{ item.seq }}楼</small>
              </div>

              <div :class="['age', { woman: item.user.gender == 1 }]">
                <i
                  :class="[
                    'iconfont',
                    item.user.gender == 2 ? 'icon-nan' : 'icon-nv',
                  ]"
                ></i>
                <span>{{ item.user.age }}</span>
              </div>

              <div class="time">{{ item.createTime | numToYMD }}</div>

              <div class="reply" v-if="item.refComment">
                <h5>回复 {{ item.refComment.nick }}</h5>
                <p>
                  <span class="text-ellipsis-10">
                    {{ item.refComment.text }}</span
                  >
                </p>
              </div>

              <div class="content text-ellipsis-10">{{ item.text }}</div>

              <div class="imgs" v-if="item.images.length">
                <div
                  class="img"
                  v-for="(img, i) in item.images"
                  :key="img"
                  @click.stop="ImagePreviewFun(item.images, i)"
                >
                  <img :src="img" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="nav">
        <div class="left">
          <p class="model con">
            <span class="poster-toggle" @click="$toast('欢迎来到葫芦侠三楼')"
              >楼</span
            >
          </p>
          <p :class="['like', { con: Favorite }]" @click="likeToggleFun">
            <span class="iconfont icon-xihuan-xianxing"></span>
          </p>
          <p :class="['praise', { con: Praise }]" @click="praiseToggleFun">
            <span class="iconfont icon-dianzan"></span>
          </p>
        </div>

        <div class="middle">
          <p :class="['prev', { disable: currPageNo == 1 }]" @click="prevPage">
            <span class="iconfont icon-xiangzuo1"></span>
          </p>
          <p class="num" @click="pagePopupShow = true">
            <span>{{ currPageNo }}</span> / {{ postData.totalPage }}
          </p>
          <p
            :class="['next', { disable: currPageNo == postData.totalPage }]"
            @click="nextPage"
          >
            <span class="iconfont icon-xiangyou1"></span>
          </p>
        </div>

        <div class="right">
          <router-link
            tag="p"
            :to="
              '/EditView?way=comment&postID=' +
              postData.post.postID +
              '&seq=' +
              seq +
              '&newSeq=' +
              (postData.post.commentCount + 1)
            "
            >我也来评论</router-link
          >
        </div>
      </div>
    </div>

    <!-- 底部弹窗 -->
    <van-popup
      class="bottom-popup-box"
      v-model="bottomPopupShow"
      position="bottom"
    >
      <main class="post-content" v-show="isPostContent">
        <span
          class="comment"
          @click="
            $router.push(
              '/EditView?way=comment&postID=' +
                postData.post.postID +
                '&seq=' +
                seq +
                '&newSeq=' +
                (postData.post.commentCount + 1)
            )
          "
          >评论</span
        >
        <span class="give" @click="showCenterPopup">送葫芦</span>
        <span
          class="repor"
          @click="
            (bottomPopupShow = false), $toast('已经成功申请\n但不一定受理哦!')
          "
          >举报</span
        >
        <span class="share">分享到社交网络</span>
        <span class="copy" @click="onCopy(true)">复制全文</span>
        <span class="cancel" @click="bottomPopupShow = false">取消</span>
      </main>
      <main class="comment-content" v-show="!isPostContent">
        <span
          class="reply"
          @click="
            $router.push(
              '/EditView?way=comment&postID=' +
                postData.post.postID +
                '&seq=' +
                seq +
                '&newSeq=' +
                (postData.post.commentCount + 1)
            )
          "
          >回复</span
        >
        <span
          class="repor"
          @click="
            (bottomPopupShow = false), $toast('已经成功申请\n但不一定受理哦!')
          "
          >举报</span
        >
        <span class="give" @click="showCenterPopup" v-show="false">送葫芦</span>
        <span class="copy" @click="onCopy(false)">复制全文</span>
        <span class="cancel" @click="bottomPopupShow = false">取消</span>
      </main>
    </van-popup>

    <!-- 送葫芦 -->
    <van-popup
      v-model="centerPopupShow"
      round
      :close-on-click-overlay="false"
      class="center-popup-box"
    >
      <main v-if="postData">
        <div class="body">
          <h1>
            赠送葫芦
            <img src="../assets/img/PostDetails/exceptional-icon.png" alt="" />
          </h1>
          <div>
            <h2>赠送对象</h2>
            <p class="user">
              <img :src="postData.post.user.avatar" alt="" />
              <span class="name">{{ postData.post.user.nick }}</span>
              <span
                :class="[
                  'iconfont',
                  postData.post.user.gender == 2 ? 'icon-nan' : 'icon-nv',
                  { woman: postData.post.user.gender == 1 },
                ]"
                >{{ postData.post.user.age }}</span
              >
            </p>
          </div>
          <div>
            <h2>选择赠送葫芦数量:</h2>
            <p class="money">
              <span
                :class="{ con: givingIndex == index }"
                v-for="(money, index) in givingMoneyList"
                :key="money"
                @click="givingIndex = index"
                >{{ money }}</span
              >
            </p>
          </div>
          <div>
            <h2>填写理由(必填):</h2>
            <textarea
              placeholder="5到30个字符"
              maxlength="30"
              v-model="givingDesc"
            ></textarea>
          </div>
        </div>
        <div class="foot">
          <button class="cancel" @click="centerPopupShow = false">取消</button>
          <button :class="{ determine: givingSubFlag }" @click="givingFun">
            确定
          </button>
        </div>
      </main>
    </van-popup>

    <!-- 底部弹窗 -->
    <van-popup class="page-popup-box" v-model="pagePopupShow" position="bottom">
      <main v-if="postData">
        <div class="head">
          <div class="start" @click="gotoPage(1)">首页</div>
          <div class="title">翻页</div>
          <div class="end" @click="gotoPage(postData.totalPage)">尾页</div>
        </div>
        <van-swipe
          class="body"
          indicator-color="white"
          :show-indicators="false"
          :loop="false"
        >
          <van-swipe-item
            v-for="i in Math.ceil(postData.totalPage / 20)"
            :key="i"
          >
            <div class="page-box">
              <div
                class="page-num"
                v-for="j in postData.totalPage < i * 20
                  ? postData.totalPage % 20
                  : 20"
                :key="j"
              >
                <span
                  @click="gotoPage((i - 1) * 20 + j)"
                  :class="{ con: (i - 1) * 20 + j == currPageNo }"
                  >{{
                    (i - 1) * 20 + j > 9
                      ? (i - 1) * 20 + j
                      : "0" + ((i - 1) * 20 + j)
                  }}</span
                >
              </div>
            </div>
          </van-swipe-item>
        </van-swipe>
      </main>
    </van-popup>
  </div>
</template>

<script>
import {
  getPostDetailJson,
  getPostPraise,
  TogglePostPraise,
  getPostCommentJson,
} from "../assets/api/posts.js";
import TopTitleBar from "../components/TopTitleBar.vue";
import { ImagePreview } from "vant";
export default {
  data() {
    return {
      centerPopupShow: false, // 中间弹窗
      bottomPopupShow: false, // 底部弹窗
      isPostContent: true,

      pagePopupShow: false, // 页码弹窗

      postData: null, // 帖子数据
      Favorite: null, // 是否收藏喜欢
      Praise: null, // 是否点赞

      currPageNo: 1, // 当前页码
      postCommentlList: null, // 从第二页开始所有评论
      postComments: null, // 要渲染的评论数据

      from: null, // 从哪进入的 左上角

      seq: -1, // 多少楼 用于回复评论

      givingIndex: 0, //赠送葫芦数量下标
      givingDesc: "", // 赠送葫芦描述输入框
      givingMoneyList: [10, 50, 100], //赠送葫芦的数量数组
    };
  },
  methods: {
    // 初始化数据
    async dataInit() {
      this.fromInit(); // 从哪来 左上角
      await this.postDataInit(); // 等待执行这两个
      await this.givingLocalUpdate(); //赠送葫芦的本地记录
      await this.historyRecord(); // 浏览历史
      await this.getSeekHit(); // 阅读数增加
      await this.setSeekHit(); // 阅读数增加
      await this.postContentInit(); // 等待执行这两个
      await this.checkPostUpdataInit(); // 最后执行
    },

    // 赠送葫芦的本地记录
    givingLocalUpdate() {
      let scorelist = JSON.parse(localStorage.getItem("scorelist"));
      if (!scorelist) return console.log("本地没有赠送葫芦记录 scorelist");
      scorelist.forEach((item) => {
        this.postData.post.scorelist.unshift(JSON.parse(JSON.stringify(item)));
        this.postData.post.scorecount = this.postData.post.scorelist.reduce(
          (s, o) => s + o.score,
          0
        );
      });
    },

    // 复制全文方法
    onCopy(flag) {
      let text;
      if (flag) text = this.postData.post.detail;
      else
        text =
          this.postComments[
            this.postComments.findIndex((o) => o.seq == this.seq)
          ].text;

      this.$copyText(this.HtmlToText(text)).then(
        (e) => {
          console.log("复制成功：", e);
          this.$toast("复制成功");
          this.bottomPopupShow = false;
        },
        (e) => {
          console.log("复制失败：", e);
          this.$toast("复制失败");
          this.bottomPopupShow = false;
        }
      );
    },

    // 赠送葫芦方法
    givingFun() {
      if (!this.givingSubFlag) return console.log("不满足条件");

      // 先隐藏弹窗
      this.centerPopupShow = false;
      // 本地记录查询我的葫芦数
      let balance = 0;
      let gourdDate = JSON.parse(localStorage.getItem("gourdDate"));
      if (gourdDate) balance = gourdDate.money;

      let title = "葫芦-赠送葫芦";
      let message = `尊敬的葫芦娃,您好\n赠送对象:${
        this.postData.post.user.nick
      }\n赠送葫芦数量:${
        this.givingMoneyList[this.givingIndex]
      }\n您的葫芦数:${balance}\n赠送后剩余:${
        balance - this.givingMoneyList[this.givingIndex]
      }\n是否进行兑换
      `;
      let flag = balance - this.givingMoneyList[this.givingIndex] >= 0;
      this.$dialog
        .confirm({ title, message, showConfirmButton: flag })
        .then(() => {
          // on confirm
          this.$toast.loading({
            message: "加载中...",
            forbidClick: true,
            loadingType: "spinner",
            duration: 1000,
            onOpened: () => {
              let timeout = setTimeout(() => {
                this.$toast({
                  message: "赠送成功\n对方已经到账",
                  icon: "certificate",
                });
                // 赠送描述
                let scoreTxt = this.givingDesc;
                // 用户id
                let userid = 20096544;
                // 赠送葫芦数
                let score = this.givingMoneyList[this.givingIndex];
                // 用户头像
                let avatar =
                  "http://cdn.u1.huluxia.com/g3/M00/72/2F/wKgBOV1dxEKAC4fGAAJ9qok49yk791.jpg";
                // 用户名
                let username = "吖#骠戈";
                // 合成对象
                let obj = {
                  userid,
                  username,
                  score,
                  scoreTxt,
                  isadmin: "0",
                  avatar,
                  userRemark: null,
                };

                // scorelist 本地数据 存储
                let scorelist = JSON.parse(localStorage.getItem("scorelist"));
                if (!scorelist) scorelist = [];
                scorelist.push(obj);
                localStorage.setItem("scorelist", JSON.stringify(scorelist));

                // 扣除葫芦
                gourdDate.money =
                  balance - this.givingMoneyList[this.givingIndex];
                localStorage.setItem("gourdDate", JSON.stringify(gourdDate));
                clearTimeout(timeout);
              }, 500);
            },
            onClose: () => {
              this.$toast({
                message: "兑换失败",
                icon: "warning-o",
              });
            },
          });
        })
        .catch(() => {
          // on cancel
        });
    },

    // 本地记录浏览次数
    getSeekHit() {
      let data = JSON.parse(localStorage.getItem("seekHitList"));
      if (!data) data = [];
      // 取到路由参数
      let postID = this.$route.query.postID;
      if (postID != 51508757) {
        postID = 51508757;
        console.log("数据不够 已经将浏览历史换成  postID = 51508757");
      }

      let obj = data.find((item) => item.postID == postID);
      let num;
      if (obj) num = obj.num;
      else num = 0;

      // 增加上去
      this.postData.post.hit += num;
    },

    // 阅读数增加
    setSeekHit() {
      let data = JSON.parse(localStorage.getItem("seekHitList"));
      if (!data) data = [];

      // 取到路由参数
      let postID = this.$route.query.postID;

      if (postID != 51508757) {
        postID = 51508757;
        console.log("数据不够 已经将浏览历史换成  postID = 51508757");
      }

      let obj = data.find((item) => item.postID == postID);
      let num;
      if (obj) num = obj.num + 1;
      else num = 1;

      // 过滤去重
      data = data.filter((item) => item.postID != postID);
      // 再添加 前面添加
      data.unshift({ postID, num });
      // 写入本地
      localStorage.setItem("seekHitList", JSON.stringify(data));
    },

    // 浏览历史
    historyRecord() {
      // 本地拿数据
      let data = JSON.parse(localStorage.getItem("historyList"));
      if (!data) data = [];
      // 取到路由参数
      let postID = this.$route.query.postID;

      if (postID != 51508757) {
        postID = 51508757;
        console.log("数据不够 已经将浏览历史换成  postID = 51508757");
      }

      // 过滤去重
      data = data.filter((item) => item.postID != postID);
      // 再添加 前面添加
      let time = new Date().getTime();
      let postTitle = this.postData.post.title;
      let categoryTitle = this.postData.post.category.title;
      data.unshift({ postID, postTitle, categoryTitle, time });
      // 写入本地
      localStorage.setItem("historyList", JSON.stringify(data));
    },

    // 检查贴子是否更新了 合并数据
    checkPostUpdataInit() {
      // 本地拿数据
      let commentList = JSON.parse(localStorage.getItem("commentList"));
      if (!commentList) return console.log("本帖子无更新");

      // 过滤出数据
      commentList = commentList.filter(
        (item) => item.postID == this.postData.post.postID
      );

      if (commentList.length) {
        // 排序 根据楼层
        let data = commentList.sort((a, b) => a.conment.seq - b.conment.seq);

        // 评论总数相加
        this.postData.post.commentCount += commentList.length;

        // 拿到最后一页评论数据
        console.log(this.postCommentlList);
        let index = this.postCommentlList.findIndex(
          (item) => item.currPageNo == this.postData.totalPage
        );

        data.forEach((item) => {
          if (this.postCommentlList[index].comments.length == 20) {
            // 超过了本页的长度 处理长度

            // 1.将帖子页数更新
            this.postData.totalPage += 1;
            // 2.将第二页后面页 页数更新
            this.postCommentlList.forEach((item) => {
              item.totalPage += 1;
            });
            // 3.手动新增页面
            // 拷贝一份
            let obj = JSON.parse(JSON.stringify(this.postCommentlList[0]));
            // 评论清空
            obj.comments = [];
            // 页码改掉
            obj.currPageNo = obj.totalPage;
            // 后面添加
            this.postCommentlList.push(obj);

            // 指针下标向下
            index += 1;
          }
          this.postCommentlList[index].comments.push(item.conment);
        });

        console.log(
          "本帖子有更新 commentList =>",
          commentList,
          "排序后数据 =>",
          data,
          "合并后数据 =>",
          this.postCommentlList[index].comments
        );
      } else console.log("本帖子无更新");
    },

    // 初始化页码评论
    async postContentInit() {
      let data = await getPostCommentJson();
      this.postCommentlList = data.postCommentlList;
      console.log("取到从第二页开始的评论 =>", this.postCommentlList);
    },

    // 初始化 获取贴子是否喜欢
    postFavoriteInit() {
      // 先查看本地是否有记录
      let PostFavoriteList = JSON.parse(
        localStorage.getItem("PostFavoriteList")
      );
      if (!PostFavoriteList) return this.PostFavoriteListInit();
      let obj = PostFavoriteList.find(
        (item) => item.post_id == this.postData.post.postID
      );
      this.Favorite = obj.isFavorite;
    },

    // 初始化 获取贴子是否点赞
    async postPraiseInit() {
      let data = await getPostPraise({ post_id: this.postData.post.postID });
      this.Praise = data.isPraise;
      console.log("获取贴子是否点赞", this.Praise);
      this.postData.post.praise =
        this.Praise == 1
          ? this.postData.post.praise + 1
          : this.postData.post.praise;
    },

    // 从哪来的
    fromInit() {
      if ("from" in this.$route.query) {
        this.from = this.$route.query.from;
      }
    },

    // 贴子数据初始化
    async postDataInit() {
      if ("postID" in this.$route.query) {
        let data = await getPostDetailJson();
        let postID = this.$route.query.postID;
        if (postID != 51508757) {
          postID = 51508757;
          console.log("数据不够 已经重定向到本帖子  postID = 51508757");
        }
        this.postData = data.postDetailList.find(
          (item) => item.post.postID == postID
        );

        // 评论区数据
        this.postComments = this.postData.comments;
        console.log(
          "取到的帖子数据 =>",
          this.postData,
          "取到评论区数据 =>",
          this.postComments
        );

        // 检查是否点赞和喜欢
        this.postFavoriteInit();
        this.postPraiseInit();
      }
    },

    // 显示底部弹窗
    showBottomPopup(val, seq) {
      this.bottomPopupShow = true;
      this.isPostContent = val;
      this.seq = seq;
    },

    // 显示赠送葫芦
    showCenterPopup() {
      this.bottomPopupShow = false;
      this.centerPopupShow = true;
    },

    // html代码转成字符
    HtmlToText(html) {
      let text = html;
      text = text.split("<text>").join("");
      text = text.split("</text>").join("");
      text = text.split("<image>").join("");
      text = text.split("</image>").join("");
      return text;
    },

    // 字符转成html代码
    TextToHtml(text) {
      let html = "";
      let arr = text.split("\n");
      arr.forEach((str) => {
        html += `<p>${str}</p>`;
      });
      return html;
    },

    // 切换点赞
    async praiseToggleFun() {
      let data = await TogglePostPraise({ post_id: this.postData.post.postID });
      if (data.praise == 1) this.Praise = 1;
      else if (data.praise == 2) this.Praise = 0;
      this.postData.post.praise =
        this.Praise == 1
          ? this.postData.post.praise + 1
          : this.postData.post.praise - 1;
      console.log("切换喜欢", this.Praise);
      this.$toast(this.Praise == 1 ? "点赞成功" : "取消点赞");
    },

    // 喜欢列表的本地存储
    PostFavoriteListInit() {
      console.log("正创建或更新帖子的喜欢的本地存储");
      // 先赋值
      this.Favorite = this.Favorite == null ? false : this.Favorite;
      let PostFavoriteList = [
        {
          post_id: this.postData.post.postID,
          isFavorite: this.Favorite,
        },
      ];
      localStorage.setItem(
        "PostFavoriteList",
        JSON.stringify(PostFavoriteList)
      );
    },

    // 切换喜欢
    async likeToggleFun() {
      // 先查看本地是否有记录
      let PostFavoriteList = localStorage.getItem("PostFavoriteList");
      if (!PostFavoriteList) return this.PostFavoriteListInit();

      // 切换转态
      this.Favorite = this.Favorite == 1 ? 0 : 1;
      console.log("收藏喜欢", this.Favorite);
      this.$toast(this.Favorite == 1 ? "收藏成功" : "取消收藏");
    },

    // 图片预览
    ImagePreviewFun(images, startPosition) {
      ImagePreview({ images, startPosition });
    },

    // 去到指定页
    gotoPage(pageNum) {
      console.log("去到指定页 =>", pageNum);

      // 回到顶部
      window.scrollTo({
        top: 0,
        behavior: "smooth",
      });

      // 关闭弹窗
      this.pagePopupShow = false;

      // 页码改变
      this.currPageNo = pageNum;

      if (pageNum == 1) {
        // 评论区数据
        this.postComments = this.postData.comments;
      } else if (pageNum > 1) {
        // 拿到下标
        let index = this.postCommentlList.findIndex(
          (item) => item.currPageNo == pageNum
        );

        // 改掉评论数据
        this.postComments = this.postCommentlList[index].comments;
      }
    },

    // 上一页
    prevPage() {
      if (this.currPageNo == 1) this.$toast("已经是第一页了");
      else {
        this.currPageNo -= 1;
        this.gotoPage(this.currPageNo);
      }
    },

    // 下一页
    nextPage() {
      if (this.currPageNo == this.postData.totalPage)
        this.$toast("已经是最后一页了");
      else {
        this.currPageNo += 1;
        this.gotoPage(this.currPageNo);
      }
    },
  },
  created() {
    this.dataInit();
  },
  beforeDestroy() {
    this.PostFavoriteListInit();
  },
  computed: {
    givingSubFlag() {
      if (this.givingDesc.length > 5) return true;
      return false;
    },
  },
  components: {
    TopTitleBar,
  },
  filters: {
    // 把数字转成年月日
    numToYMD(val) {
      let y = new Date(val).getFullYear() - 2000 + "年";
      let m = new Date(val).getMonth() + 1 + "月";
      let d = new Date(val).getDate() + "日";
      return y + m + d;
    },
  },
};
</script>

<style lang="scss" scoped>
.PostDetails {
  .TopTitleBar {
    .left {
      display: flex;
      align-items: center;
      .icon-xiangzuo1 {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
        margin-right: 4px;
      }
    }
    .right {
      display: flex;
      align-items: center;

      .icon-xiaoxi,
      .icon-fangdajing {
        font-weight: bold;
        color: #fff;
        font-size: 22px;
      }
    }
  }

  main {
    margin-top: 8px;
    margin-top: 0;
    padding: 0 12px;
    padding: 0;

    .box {
      background-color: rgba(255, 255, 255, 0.75);
      margin-bottom: 10px;
      padding: 8px;

      &:nth-child(1) {
        padding: 0;
      }

      .img {
        width: 83px;
        height: 83px;
        border-radius: 5px;
        overflow: hidden;
        margin-right: 8px;
      }
    }

    .name-icon {
      display: flex;
      padding-bottom: 8px;
      border-bottom: 1px solid rgba(255, 255, 255, 0.5);
      padding: 0 13px;

      .icon {
        width: 61px;
        height: 61px;
        margin-right: 10px;

        img {
          position: relative;
          border-radius: 5px;
          bottom: 9px;
        }
      }

      h4 {
        height: 32px;
        line-height: 32px;
        color: #1c1c1c;
      }

      .level {
        height: 16px;
        line-height: 16px;
        text-align: center;
        color: #f4fefa;
        font-size: 12px;
        display: flex;
      }

      p {
        width: max-content;
        height: 16px;
        background-color: #12d364;
        border-radius: 4px;
        padding: 0 4px;

        span {
          display: inline-block;
          transform: scale(0.8);
        }

        &:last-child {
          background-color: #1dc8f0;
          margin-left: 5px;

          &::before {
            content: "";
            display: inline-block;
            width: 10px;
            height: 10px;
            background-size: cover;
            transform: scale(0.9);
            position: relative;
            top: 0;
          }
        }
      }

      .right {
        flex: 1;
      }

      .money {
        height: 22px;
        line-height: 22px;
        color: #656565;
        font-size: 12px;
        margin-top: 14px;

        span {
          color: #1e1e1e;
          margin-right: 5px;

          &:last-child {
            margin-left: 15px;
          }
        }
      }
    }

    .num {
      display: flex;
      flex-wrap: wrap;

      a {
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        width: calc(100% / 3);
        text-align: center;
        height: 53px;
        font-size: 12px;
        position: relative;

        &::after {
          content: "";
          display: block;
          position: absolute;
          top: 0;
          bottom: 0;
          margin: auto;
          right: 0;
          width: 1px;
          height: 14px;
          background-color: #efefef;
        }

        &:nth-child(3n):after {
          content: none;
        }

        p {
          font-size: 14px;
          color: #000;
          margin-bottom: 4px;
        }

        small {
          color: #737373;
        }
      }
    }

    .head {
      h4 {
        height: 38px;
        line-height: 38px;
        color: #282828;
      }
    }

    .imgs {
      display: flex;
    }

    .info {
      p {
        height: 26px;
        line-height: 26px;
        margin-bottom: 3px;
        font-size: 14px;
        color: #868686;

        &:last-child {
          margin-bottom: 0;
        }

        span {
          color: #6a6a6a;
          margin-left: 12px;
        }
      }
    }

    .node-place {
      margin-top: 15px;
      padding-left: 4px;

      div {
        color: #1e1e1e;
        font-size: 15px;
        height: 33px;
        line-height: 33px;

        span {
          color: #00bf3f;
          margin-left: 11px;
        }
      }
    }

    .user {
      height: 70px;
      border-bottom: 1px solid #eaeaea;
      box-sizing: border-box;
      display: flex;
      padding: 12px;

      .icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        overflow: hidden;
      }

      .text {
        flex: 1;
        margin: 0 10px;
      }

      .name {
        height: 25px;
        line-height: 25px;
        font-size: 15px;
        margin-bottom: 2px;
        color: #343434;
      }

      .age {
        background-color: #1dc8f0;
        height: 16px;
        line-height: 16px;
        border-radius: 3px;
        width: max-content;
        color: #fff;
        padding: 0 4px;

        span {
          display: inline-block;
          transform: scale(0.7);
          margin-left: -4px;
        }

        &::before {
          content: "";
          display: inline-block;
          background-size: 10px 81px;
          width: 10px;
          height: 11px;
        }
      }

      p {
        display: block;
        width: 65px;
        height: 25px;
        box-sizing: border-box;
        border: 1px solid #bdbdbd;
        color: #bdbdbd;
        font-size: 12px;
        text-align: center;
        line-height: 25px;
        border-radius: 5px;
        align-self: center;
      }

      &.con {
        p {
          border-color: #0cc85c;
          color: #0cc85c;
        }
      }

      &.woman {
        .age {
          background-color: #f452a2;

          &::before {
            background-size: 10px 81px;
            width: 8px;
            height: 11px;
          }
        }
      }
    }

    .msg-item {
      display: flex;
      padding: 12px;
      border-bottom: 1px solid #e6e6e6;

      &:active {
        opacity: 0.9;
        box-shadow: 0 0 100px 0 inset rgba(0, 0, 0, 0.1);
      }

      .icon {
        width: 46px;
        height: 46px;
        border-radius: 50%;
        overflow: hidden;
        flex-shrink: 0;
      }

      .text {
        flex: 1;
        max-width: calc(100% - 56px);
        margin-left: 10px;
      }

      .title {
        display: flex;
        justify-content: space-between;
        margin-bottom: 2px;

        span {
          display: block;
          color: #343434;
          height: 22px;
          line-height: 22px;
          font-size: 15px;
        }

        small {
          font-size: 12px;
          color: #0cc85c;
        }
      }

      .age {
        background-color: #1dc8f0;
        height: 16px;
        line-height: 16px;
        border-radius: 3px;
        width: max-content;
        color: #fff;
        padding: 0 4px;

        span {
          display: block;
          font-size: 12px;
          display: flex;
          align-items: center;

          &::before {
            display: block;
            margin-right: 2px;
          }
        }
      }

      .woman {
        background-color: #f452a2;
      }

      .time {
        font-size: 12px;
        color: #bebebe;
        height: 28px;
        line-height: 28px;
        margin-bottom: 5px;
      }

      .reply {
        background-color: #f0f0f0;
        padding: 5px 10px;
        border-radius: 4px;

        h5 {
          font-weight: normal;
          color: #969696;
          height: 31px;
          line-height: 31px;
        }

        p {
          color: #646464;
          line-height: 20px;
          padding: 4px 0 5px;
          font-size: 15px;
        }
      }

      .content {
        color: #323232;
        line-height: 20px;
        margin: 11px 0;
        font-size: 15px;
      }

      .origin {
        border: 1px solid #e0e0e0;
      }
    }

    .post-item {
      padding: 13px 0;
      display: flex;
      border-bottom: 1px solid #dddddd;

      .icon {
        width: 91px;
        height: 91px;
        border-radius: 5px;
        overflow: hidden;
      }

      .text {
        flex: 1;
        margin-left: 8px;
      }

      .title {
        line-height: 21px;
        color: #0e0e0e;
        font-size: 15px;
        margin-bottom: 5px;
      }

      .content {
        height: 42px;
        line-height: 14px;
        color: #646464;
        font-size: 12px;
        margin-bottom: 11px;
      }

      .info {
        display: flex;
        justify-content: space-between;

        .name {
          small {
            color: #969696;
          }
        }

        .time {
          small {
            color: #cccccc;
          }
        }
      }

      .seek {
        i {
          content: "";
          display: inline-block;
          background-size: 69px 13px;
          width: 16px;
          height: 11px;
          position: relative;
          vertical-align: middle;
        }
      }

      .msg {
        margin-left: 5px;

        i {
          content: "";
          display: inline-block;
          background-size: 69px 13px;
          width: 13px;
          height: 13px;
          position: relative;
          vertical-align: middle;
        }
      }
    }

    & > div {
      display: block;
    }

    .icon-info {
      display: flex;
      padding: 12px;
      background-color: #fff;

      .img {
        width: 72px;
        height: 72px;
        border-radius: 5px;
        overflow: hidden;
        margin-right: 12px;
      }

      .info {
        flex: 1;

        h1 {
          height: 21px;
          line-height: 21px;
          font-size: 15px;
          color: #0e0e0e;
          margin: 0;
        }

        p {
          color: #969696;
          font-size: 12px;
          margin-bottom: 0;

          span {
            color: #14ca61;
            margin-right: 12px;
            margin-left: 0;
          }
        }
      }
    }

    .icons {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .left {
        display: flex;
      }

      .icon {
        width: 25px;
        height: 25px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 5px;
      }

      .more {
        background-size: 21px 5px;
        width: 21px;
        height: 5px;
        justify-items: flex-end;
      }
    }
  }

  .box {
    padding: 0 12px;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 74px;
      box-sizing: border-box;
      border-bottom: 1px solid #eaeaea;
      position: relative;
    }

    .img {
      width: 49px;
      height: 49px;
    }

    .title {
      width: calc(100% - 59px);
      box-sizing: border-box;
      padding-right: 25px;
      height: 49px;
      line-height: 49px;
      color: #3e3e3e;

      h4 {
        font-weight: normal;
      }
    }

    i {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
      width: 9px;
      height: 17px;
      background-size: cover;
    }
  }

  .wrap {
    .title {
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 28px;
      line-height: 28px;
      color: #323232;
      padding: 5px 12px 0;

      i {
        display: block;
        background-size: 283px 139px;
        width: 16px;
        height: 16px;
      }
    }

    .date {
      background-color: #fff;
      height: 22px;
      line-height: 22px;
      font-size: 12px;
      color: #bdbdbd;
      padding: 0 12px;
    }

    .details {
      background-color: #fff;
      height: 26px;
      line-height: 26px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 12px 4px;
      font-size: 12px;

      .left {
        display: flex;
      }

      .right {
        display: flex;

        a {
          color: #969696;

          &::after {
            content: "";
            display: inline-block;
            background-size: 283px 139px;
            width: 6px;
            height: 10px;
            margin-left: 5px;
          }
        }
      }

      .msg {
        &::before {
          background-size: 283px 139px;
          width: 13px;
          height: 13px;
        }
      }

      .praise {
        &::before {
          background-size: 283px 139px;
          width: 13px;
          height: 13px;
        }
      }
    }

    .poster {
      background-color: #fff;
      padding: 0 12px;

      .box {
        padding: 12px 0 10px;
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #e0e0e0;
        &:active {
          box-shadow: 0 0 50px 0 inset rgba(0, 0, 0, 0.1);
        }
      }

      .left {
        width: max-content;
        display: flex;

        .icon {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 10px;
        }

        .name {
          height: 21px;
          line-height: 21px;
          color: #323232;
          font-size: 15px;
          margin-bottom: 4px;
        }

        .sex {
          height: 15px;
          line-height: 15px;
          background: #1dc8f0;
          border-radius: 5px;
          color: #fff;
          text-align: center;

          em {
            display: inline-block;
            background-size: 10px 81px;
            width: 10px;
            transform: scale(1.3);
            height: 11px;
          }

          span {
            display: inline-block;
            transform: scale(0.7);
          }
        }
      }

      .right {
        line-height: 17px;
        font-size: 12px;
        height: 17px;

        span {
          color: #0cc85c;
        }
      }
    }

    .post-content {
      background-color: #fff;

      .text-img {
        padding: 15px 12px;
        border-top: 1px solid #e7e7e7;
        border-bottom: 1px solid #e7e7e7;
      }

      .text {
        line-height: 20px;
        color: #646464;
        font-size: 15px;
      }

      .imgs {
        margin-top: 49px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      .img {
        margin-top: 5px;
        width: calc((100% - 10px) / 3);
        border-radius: 5px;
        overflow: hidden;

        &:nth-child(-n + 3) {
          margin-top: 0;
        }
      }
    }

    .exceptional {
      background-color: #fff;
      padding: 12px;
      display: flex;
      justify-content: space-between;

      .right {
        margin-top: 3px;

        i {
          display: inline-block;
          background-size: 21px 5px;
          width: 21px;
          height: 5px;
        }
      }

      .left {
        flex: 1;
        display: flex;
        overflow: hidden;
        margin-right: 40px;
      }

      .sum {
        margin-right: 8px;
      }

      .users {
        overflow-y: hidden;
        overflow-x: scroll;
        display: flex;

        .icon {
          margin-right: 5px;
        }
      }

      .icon {
        width: 36px;
        text-align: center;

        img {
          border-radius: 50%;
          width: 36px;
          height: 36px;
          margin-bottom: 9px;
        }

        span {
          color: #323232;
          font-size: 12px;
          display: inline-block;
        }
      }
    }

    .comments {
      margin-top: 10px;
      background-color: #fff;

      .head {
        font-size: 14px;
        height: 38px;
        line-height: 38px;
        padding: 0 12px;

        h4 {
          color: #646464;
        }
      }

      .msg-publish {
        display: flex;
        padding: 12px;
        border-top: 1px solid #f2f2f2;

        .icon {
          width: 46px;
          height: 46px;
          border-radius: 50%;
          overflow: hidden;
        }

        .text {
          flex: 1;
          margin-left: 10px;
        }

        .msg-title {
          display: flex;
          justify-content: space-between;
          margin-bottom: 2px;

          span {
            display: block;
            color: #343434;
            height: 22px;
            line-height: 22px;
            font-size: 15px;
          }

          small {
            font-size: 12px;
            color: #0cc85c;
          }
        }

        .age {
          background-color: #1dc8f0;
          height: 16px;
          line-height: 16px;
          border-radius: 3px;
          width: max-content;
          color: #fff;
          padding: 0 4px;

          span {
            display: inline-block;
            transform: scale(0.7);
            margin-left: -4px;

            &::before {
              content: "";
              display: inline-block;
              background-size: 10px 81px;
              width: 10px;
              height: 11px;
            }
          }
        }

        .woman {
          background-color: #f452a2;

          &::before {
            background-size: 10px 81px;
            width: 8px;
            height: 11px;
          }
        }

        .time {
          font-size: 12px;
          color: #bebebe;
          height: 28px;
          line-height: 28px;
          margin-bottom: 5px;
        }

        .content {
          color: #323232;
          line-height: 20px;
          margin: 11px 0 0;
          font-size: 15px;
        }
      }

      .msg-reply {
        .reply {
          background-color: #f0f0f0;
          padding: 5px 10px;
          border-radius: 4px;

          h5 {
            font-weight: normal;
            color: #969696;
            height: 31px;
            line-height: 31px;
          }

          p {
            color: #646464;
            line-height: 20px;
            padding: 4px 0 5px;
            font-size: 15px;
          }
        }
      }
    }

    .nav {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      max-width: 750px;
      min-width: 320px;
      margin: auto;
      height: 45px;
      line-height: 45px;
      box-sizing: border-box;
      border-top: 1px solid #e0e0e0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 10;
      background-color: #fff;
      padding: 0 8px 0 10px;

      .left {
        display: flex;
        align-items: center;

        a {
          margin-right: 18px;
        }
      }

      .middle {
        display: flex;
        align-items: center;

        p {
          margin: 0 28px;
          color: #323232;
          font-size: 12px;

          span {
            color: #0cc85c;
          }
        }
      }

      .right {
        p {
          display: block;
          width: 76px;
          height: 30px;
          line-height: 30px;
          text-align: center;
          border-radius: 15px;
          background-color: #f0f0f0;
          font-size: 12px;
          color: #9b9b9b;
        }
      }

      .model {
        background-size: 283px 139px;
        width: 26px;
        height: 26px;
        display: inline-block;
      }

      .like {
        display: inline-block;
        background-size: 283px 139px;
        width: 26px;
        height: 23px;
      }

      .praise {
        display: inline-block;
        background-size: 283px 139px;
        width: 26px;
        height: 26px;
      }

      .prev {
        display: inline-block;
        background-size: 283px 139px;
        width: 8px;
        height: 14px;

        &.con {
          background-position: -10px 0;
        }
      }

      .next {
        background-size: 283px 139px;
        width: 8px;
        display: inline-block;
        height: 14px;

        &.con {
          background-position: -111px -56px;
        }
      }
    }
  }

  main .post-item .info .left,
  main .post-item .info .right {
    display: flex;
    font-size: 12px;
    height: 12px;
    line-height: 12px;
  }

  main .post-item .info .left small,
  main .post-item .info .right small {
    display: inline-block;
    transform: scale(0.9);
    color: #3e3e3e;
  }

  header .left,
  header .right {
    display: flex;
  }

  .talent {
    display: flex;
    background-color: #fafafa;
    height: 42px;
    align-items: center;
    box-sizing: border-box;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    background-color: #fff;

    a {
      display: block;
      flex: 1;
      height: 22px;
      line-height: 22px;
      text-align: center;
      border-right: 1px solid #f0f0f0;
      color: #969696;
      font-size: 14px;

      i {
        display: inline-block;
        background-size: 237px 42px;
        width: 22px;
        height: 22px;
        vertical-align: -5px;
        margin-right: 5px;
      }

      &:nth-child(2) {
        i {
          background-size: 237px 42px;
          width: 21px;
          height: 21px;
        }
      }
    }
  }

  .announce {
    padding: 0 12px;
    margin-bottom: 10px;
    background-color: #fff;

    a {
      display: block;
      width: 100%;
      font-size: 15px;
      color: #0e0e0e;
      height: 45px;
      line-height: 45px;
      border-bottom: 1px solid #dddddd;

      &:last-child {
        border-bottom-width: 0;
      }

      em {
        font-style: normal;
        display: inline-block;
        height: 14px;
        line-height: 14px;
        font-size: 12px;
        color: #fff;
        border-radius: 2px;
      }

      .red {
        background-color: #ff3e62;
      }

      .yellow {
        background-color: #fb9644;
      }

      span {
        display: inline-block;
        transform: scale(0.8);
        position: relative;
        bottom: 1px;
      }
    }
  }

  .post-mag-box {
    background-color: #fff;

    .head {
      display: flex;
      height: 42px;
      line-height: 42px;
      overflow-x: scroll;
      font-size: 15px;
      color: #646464;

      p {
        height: 42px;
        box-sizing: border-box;
        border-bottom: 1px solid #e0e0e0;
        white-space: nowrap;
        padding: 0 12px;
      }

      .con {
        color: #14ca61;
        position: relative;

        &::after {
          content: "";
          display: block;
          position: absolute;
          height: 2px;
          left: 0;
          right: 0;
          bottom: -1px;
          width: calc(100% - 24px);
          margin: auto;
          background-color: #0cc85c;
        }
      }

      &::-webkit-scrollbar {
        width: 0;
        height: 0;
      }

      &::-webkit-scrollbar-thumb {
        width: 0;
        height: 0;
      }
    }

    .body {
      padding: 0 12px;
    }
  }

  .wrap .details .seek,
  .wrap .details .msg,
  .wrap .details .praise {
    margin-right: 9px;
    color: #323232;
  }

  .wrap .details .seek::before,
  .wrap .details .msg::before,
  .wrap .details .praise::before {
    content: "";
    display: inline-block;
    background-size: 283px 139px;
    width: 16px;
    height: 11px;
    margin-right: 5px;
  }

  .wrap .exceptional .users::-webkit-scrollbar,
  .wrap .exceptional .users::-webkit-scrollbar-thumb {
    width: 0;
    height: 0;
  }

  .wrap {
    padding-top: 0;
    padding-bottom: 45px;
    word-break: break-all;
    .title {
      max-height: 48px;
      height: auto;
      line-height: 24px;
      .icon-tupian {
        margin-left: 10px;
        color: #d2c609;
        display: flex;
        align-items: center;
      }
    }

    .details {
      .left {
        .msg,
        .praise,
        .seek {
          display: flex;
          align-items: center;
          .iconfont {
            margin-right: 5px;
            color: #a0a0a0;
          }
          &::before {
            content: none;
          }
        }
      }
      .right {
        a {
          &:active {
            color: #666;
            opacity: 0.9;
            box-shadow: 0 0 30px 0 inset rgba($color: #000000, $alpha: 0.2);
          }
          .icon-xiangyou1 {
            font-size: 14px;
          }
          &::after {
            content: none;
          }
        }
      }
    }

    .poster {
      .name-sex {
        .sex {
          display: flex;
          align-items: center;
          width: max-content;

          &.woman {
            background-color: #f452a2;
          }

          em {
            display: inline;
            transform: scale(1);
          }
        }
      }
    }

    .post-content {
      .text-img {
        .text {
          word-break: break-all;
        }
        .imgs {
          align-content: flex-start;
          justify-content: flex-start;
          .img {
            width: 110px;
            height: 110px;
            margin-right: calc((100% - 330px) / 2);
            margin-top: 10px;
            &:nth-child(-n + 3) {
              margin-top: 0;
            }
            &:nth-child(3n) {
              margin-right: 0;
            }
          }
        }

        &:active {
          opacity: 0.8;
          box-shadow: 0 0 100px 0 inset rgba($color: #000000, $alpha: 0.2);
        }
      }
      .exceptional {
        .left {
          .users,
          .sum {
            .icon {
              img {
                margin-bottom: 5px;
              }
            }
          }
        }

        &:active {
          opacity: 0.9;
          box-shadow: 0 0 100px inset rgba($color: #000000, $alpha: 0.2);
        }
        .right .icon-gengduo {
          color: #969696;
          margin-top: 6px;
          font-size: 24px;
        }
      }
    }

    .comments {
      .body {
        .msg-publish {
          &:active {
            opacity: 0.8;
            box-shadow: 0 0 100px 0 inset rgba($color: #000000, $alpha: 0.2);
          }

          .icon {
            height: auto;
            width: 46px;
            border-radius: 0;

            img {
              width: 46px;
              height: 46px;
              border-radius: 50%;
            }

            span {
              display: block;
              width: 100%;
              height: 26px;
              line-height: 26px;
              color: #0cc85c;
              text-align: center;
              font-size: 12px;
              margin-top: 3px;
            }
          }

          .text {
            .age {
              display: flex;
              align-items: center;
              span {
                &::before {
                  width: 5px;
                }
              }
              .icon-nan,
              .icon-nv {
                font-size: 12px;
              }
            }
          }

          .imgs {
            display: flex;
            flex-wrap: wrap;
            align-content: flex-start;
            justify-content: flex-start;
            margin-top: 10px;
            .img {
              width: 90px;
              height: 90px;
              border-radius: 5px;
              overflow: hidden;
              margin-right: calc((100% - 270px) / 2);
              margin-top: 8px;

              &:nth-child(-n + 3) {
                margin-top: 0;
              }

              &:nth-child(3n) {
                margin-right: 0;
              }
            }
          }
        }
      }
    }

    .nav {
      line-height: unset;
      .left {
        p {
          display: flex;
          align-items: center;
          margin-right: 18px;
          &.like.con .iconfont {
            color: #f4384e;
            text-shadow: 0 0 5px #f4384e;
          }

          &.praise.con .iconfont {
            color: #ffc107;
            text-shadow: 0 0 5px #ffc107;
          }

          &.like,
          &.praise {
            .iconfont {
              font-size: 28px;
              color: #646464;
            }
          }
          &.model {
            border: 2px solid #646464;
            width: 20px;
            height: 20px;
            border-radius: 50%;

            &.con {
              border-color: #0cc85c;
              background-color: #0cc85c;
              span {
                color: #fff;
              }
            }

            span {
              font-size: 14px;
              width: 20px;
              height: 20px;
              display: block;
              color: #646464;
              text-align: center;
              font-weight: bold;
            }
          }

          &.like:active,
          &.praise:active,
          &.model:active {
            transform: scale(1.1);
            opacity: 0.9;
          }
        }
      }

      .middle {
        .num {
          margin: 0 18px;
        }
        .prev,
        .next {
          margin: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          width: 28px;
          height: 28px;
          &.disable .iconfont {
            color: #999;
          }
        }
        .num:active,
        .prev:active,
        .next:active {
          transform: scale(1.1);
          opacity: 0.9;
        }
      }

      .right p:active {
        opacity: 0.9;
        box-shadow: 0 0 40px 0 inset rgba($color: #000000, $alpha: 0.1);
      }
    }
  }

  .bottom-popup-box {
    main {
      margin: 0;
      span {
        color: #0cc85c;
        display: block;
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #e9e9e9;
        &:active {
          opacity: 0.9;
          box-shadow: 0 0 40px 0 inset rgba($color: #000000, $alpha: 0.2);
        }
        &.cancel {
          border-bottom-width: 0;
          border-top: 1px solid #e9e9e9;
          color: #646464;
        }
      }
    }
  }

  .center-popup-box {
    main {
      margin: 0;
      width: 260px;
      overflow: hidden;
      .body {
        padding: 10px;
        h1 {
          font-size: 16px;
          color: #323232;
          line-height: 24px;
          height: 24px;
          display: flex;
          align-items: center;
          img {
            width: 18px;
            height: 18px;
            margin-left: 2px;
          }
        }

        div {
          margin-top: 5px;
          h2 {
            font-size: 14px;
            height: 24px;
            line-height: 24px;
            color: #555;
          }

          .user {
            display: flex;
            align-items: center;

            img {
              width: 28px;
              height: 28px;
              border-radius: 50%;
            }

            .name {
              font-size: 13px;
              color: #323232;
              display: block;
              max-width: 5em;
              margin-left: 5px;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .iconfont {
              margin-left: 5px;
              height: 15px;
              font-size: 12px;
              color: #fff;
              background-color: #1dc8f0;
              border-radius: 4px;
              padding: 0 4px;
              display: flex;
              align-items: center;
              &.woman {
                background-color: #f452a2;
              }
            }
          }

          .money {
            font-size: 14px;
            display: flex;
            span {
              display: block;
              height: 26px;
              line-height: 26px;
              text-align: center;
              flex: 1;
              border: 1px solid;
              color: #aaa;
              border-color: #aaa;
              border-radius: 4px;
              margin-right: 8px;
              background-color: #fff;

              &.con {
                color: #0cc85c;
                border-color: #0cc85c;
                background-color: #edfff2;
              }

              &:last-child {
                margin-right: 0;
              }
            }
          }

          textarea {
            display: block;
            width: 100%;
            border-radius: 2px;
            border-color: #e5e5e5;
            padding: 4px;
            box-sizing: border-box;
            font-size: 14px;
            line-height: 20px;
            height: 70px;
            outline: none;
          }
        }
      }

      .foot {
        display: flex;
        height: 38px;
        line-height: 38px;
        button {
          flex: 1;
          font-size: 16px;
          color: #969696;
          padding: 0;
          display: block;
          outline: none;
          border: 0;
          background-color: #fff;
          border-top: 1px solid #f0f0f0;
          border-right: 1px solid#f0f0f0;

          &:active {
            opacity: 0.9;
            box-shadow: 0 0 38px 0 inset rgba($color: #000000, $alpha: 0.2);
          }

          &.determine {
            color: #0cc85c;
          }

          &:last-child {
            border-right-width: 0;
          }
        }
      }
    }
  }

  .page-popup-box {
    box-sizing: border-box;
    .head {
      padding: 0 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 14px;
      height: 40px;
      border-bottom: 1px solid #ededed;
      border-top: 1px solid #ededed;
      .title {
        color: #323232;
      }
      .start,
      .end {
        height: 26px;
        line-height: 26px;
        border-radius: 13px;
        box-sizing: border-box;
        color: #646464;
        border: 1px solid #646464;
        padding: 0 6px;
        &:active {
          background-color: #6464641e;
        }
      }
    }
    .body {
      font-size: 12px;
      .page-box {
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        height: calc(40px * 4);
        background-image: linear-gradient(
          #fff8f9 0%,
          #fff8f9 25%,
          #f1eaeb 25%,
          #f1eaeb 50%,
          #fff8f9 50%,
          #fff8f9 75%,
          #f1eaeb 75%,
          #f1eaeb 100%
        );
        .page-num {
          width: 20%;
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            width: 32px;
            height: 32px;
            line-height: 32px;
            color: #bdbdbd;
            text-align: center;
            border-radius: 50%;
            &:active {
              background-color: #0cc85d23;
            }
            &.con {
              background-color: #0cc85c;
              color: #fdfefd;
            }
          }
        }
      }
    }
  }
}
</style>